<!--  -->
<template>
  <div class="dashboard-srmlist">
    <div class="srmlist-item">
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="date" label="日期" width="150">
          </el-table-column>
          <el-table-column prop="name" label="客户名称" width="120">
          </el-table-column>
          <el-table-column prop="province" label="项目状态" width="120">
          </el-table-column>
          <el-table-column prop="city" label="业务" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="负责人" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="srmlist-input">
      <p>
        <span>客户名称:</span>
        <input type="text" placeholder="请输入您的名字" v-model="input" />
      </p>
      <p>
        <span>所在地址:</span>
        <input
          type="text"
          name=""
          id=""
          placeholder="请输入您的地址"
          v-model="inputT"
        />
      </p>
      <p>
        <span>业务:</span> <input type="text">
      </p>
      <p>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="负责人">
            <el-input v-model="formInline.user"></el-input>
          </el-form-item>
          <el-form-item label="对接人员">
            <el-input v-model="formInline.user1"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </p>
      <p>
        <el-steps :space="200" :active="1" finish-status="success">
        <span>状态:</span> <el-step title="已交付"></el-step> 
       <el-step title="进行中"></el-step>
        <el-step title="未交付"></el-step>
      </el-steps>
      </p>
     <p >
        <el-row class="changeb">
        <el-button type="success" class="button">提交</el-button>
      </el-row>
     </p>
    </div>
  </div>
</template>


<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      input: "",
      inputT: "",
        formInline: {
          user: '',
          region: ''
        },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "交付",
          city: "",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: "小王",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "未交付",
          city: "",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: "小张",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "未交付",
          city: "",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: "小李",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "交付",
          city: "",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: "小郑",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick(row) {
      console.log(row);
    },
    onSubmit() {
        console.log('submit!');
      },
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.dashboard-srmlist {
  width: 100%;
  height: 1400px;
  margin: 0 auto;
  padding-top: 60px;
  .srmlist-input {
    padding: 5px;
    border: 1px solid #ddd;
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    p {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      margin: 20px 0;
      span {
        padding-left: 80px;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      input {
        padding-left: -100px;
        width: 800px;
        border: 1px solid #ddd;
        border-radius: 10px;
      }
      .changeb{
        padding-left: 300px;
        text-align: center;
           .button{
       width: 400px;
      }
      }
     
    }
    
  }
  .srmlist-item {
    padding: 5px;
    margin: 20px auto;
    border: 1px solid #ddd;
    width: 1000px;
    height: 400px;
  }
  .demo-form-inline{
    padding-left: 80px;
  }
}
</style>